// theme.js 代码

import { ElMessage } from 'element-plus'

/**
 * 颜色转换函数
 * @method hexToRgb hex 颜色转 rgb 颜色
 * @method rgbToHex rgb 颜色转 Hex 颜色
 * @method getDarkColor 加深颜色值
 * @method getLightColor 变浅颜色值
 */
export function useChangeColor() {
     // str 颜色值字符串
     const hexToRgb = (str: any) => {
          let hexs: any = ''
          const reg = /^\#?[0-9A-Fa-f]{6}$/
          if (!reg.test(str)) {
               ElMessage.warning('输入错误的hex')
               return ''
          }
          str = str.replace('#', '')
          hexs = str.match(/../g)
          for (let i = 0; i < 3; i++) hexs[i] = parseInt(hexs[i], 16)
          return hexs
     }
     // r 代表红色 | g 代表绿色 | b 代表蓝色
     const rgbToHex = (r: any, g: any, b: any) => {
          const reg = /^\d{1,3}$/
          if (!reg.test(r) || !reg.test(g) || !reg.test(b)) {
               ElMessage.warning('输入错误的rgb颜色值')
               return ''
          }
          const hexs = [r.toString(16), g.toString(16), b.toString(16)]
          for (let i = 0; i < 3; i++)
               if (hexs[i].length == 1) hexs[i] = `0${hexs[i]}`
          return `#${hexs.join('')}`
     }
     // color 颜色值字符串 | level 变浅的程度，限0-1之间
     const getDarkColor = (color: any, level: any) => {
          const reg = /^\#?[0-9A-Fa-f]{6}$/
          if (!reg.test(color)) {
               ElMessage.warning('输入错误的hex颜色值')
               return ''
          }
          const rgb = useChangeColor().hexToRgb(color)
          for (let i = 0; i < 3; i++) rgb[i] = Math.floor(rgb[i] * (1 - level))
          return useChangeColor().rgbToHex(rgb[0], rgb[1], rgb[2])
     }
     // color 颜色值字符串 | level 加深的程度，限0-1之间
     const getLightColor = (color: any, level: any) => {
          const reg = /^\#?[0-9A-Fa-f]{6}$/
          if (!reg.test(color)) {
               ElMessage.warning('输入错误的hex颜色值')
               return ''
          }
          const rgb = useChangeColor().hexToRgb(color)
          for (let i = 0; i < 3; i++)
               rgb[i] = Math.floor((255 - rgb[i]) * level + rgb[i])
          return useChangeColor().rgbToHex(rgb[0], rgb[1], rgb[2])
     }

     const themeList = [
          {
               label: '主题1',
               value: {
                    primary: '#409eff',
                    success: '#67c23a',
                    info: '#3F7EAB',
                    warning: '#e6a23c',
                    danger: '#f56c6c',
               },
          },
          {
               label: '主题2',
               value: {
                    primary: '#0B9B8A',
                    success: '#0B9B2A',
                    info: '#3F7EAB',
                    warning: '#EDAF43',
                    danger: '#F596A1',
               },
          },
          {
               label: '主题3',
               value: {
                    primary: '#6168FC',
                    success: '#F8BDDA',
                    info: '#77B5FF',
                    warning: '#90507C',
                    danger: '#FF349A',
               },
          },
     ]

     // themeValue 主题value值
     const changeThemeByColor = (themeValue: any) => {
          const symbolList = ['primary', 'success', 'info', 'warning', 'danger']

          // TODO 待完善：后期可从缓存中优先读取主题

          const colorObj = themeValue
          symbolList.forEach((item) => {
               const color = colorObj[item]
               const elColor = `--el-color-${item}`
               const elColorDark = `--el-color-${item}-dark-2`
               const elColorLight = `--el-color-${item}-light`
               document.documentElement.style.setProperty(elColor, color)
               document.documentElement.style.setProperty(
                    elColorDark,
                    `${getDarkColor(color, 0.1)}`,
               )
               for (let i = 1; i <= 9; i++) {
                    document.documentElement.style.setProperty(
                         elColorLight + `-${i}`,
                         `${getLightColor(color, i / 10)}`,
                    )
               }
          })
     }

     return {
          hexToRgb,
          rgbToHex,
          getDarkColor,
          getLightColor,
          changeThemeByColor,
          themeList,
     }
}
